<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
    <style>
        body {
            padding: 20px;
        }

        table td, table th {
            padding: 5px 10px;
        }

        .green {
            background-color: #08db19;
        }

        .red {
            background-color: red;
        }
    </style>
</head>
<body>
<table class="table-bordered table-hover">
    <thead>
    <tr>
        <th>正则表达式含义</th>
        <th>正则表达式</th>
        <th>测试字符串</th>
        <th>字符串与正则表达式是否匹配</th>
        <th>测试是否通过</th>
    </tr>
    </thead>
    <tbody id="result">

    </tbody>
</table>
<script>
    var regexarray = [{
        regex: /^(\+|\-)?[0-9]+$/,
        regexdesc: '整数',
        testvalues: [{
            value: '1',
            expected: true
        }, {
            value: '-1',
            expected: true
        }, {
            value: '+1',
            expected: true
        }, {
            value: '00',
            expected: true
        }, {
            value: '1.2',
            expected: false
        }]
    }, {
        regex: /^(\-|\+)?\d+(\.\d+)?$/,
        regexdesc: '浮点数',
        testvalues: [{
            value: '1',
            expected: true
        }, {
            value: '-1',
            expected: true
        }, {
            value: '+1',
            expected: true
        }, {
            value: '+1.0',
            expected: true
        }, {
            value: '00',
            expected: true
        }, {
            value: '0',
            expected: true
        },  {
            value: '1.2',
            expected: true
        }, {
            value: '0.1',
            expected: true
        }, {
            value: '1.',
            expected: false
        }]
    }, {
        regex: /^[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?$/,
        regexdesc: '域名',
        testvalues: [{
            value: 'abc012.def345',
            expected: true
        }, {
            value: 'abc012.def345.',
            expected: true
        }, {
            value: '@.com',
            expected: false
        }, {
            value: 'abc012',
            expected: false
        }]
    }, {
        regex: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
        regexdesc: 'IP',
        testvalues: [{
            value: '192.168.1.1',
            expected: true
        }, {
            value: '192.168.1.',
            expected: false
        }, {
            value: '127.0.0.1',
            expected: true
        }]
    },{
        regex: /^[A-Za-z0-9]*$/,
        regexdesc: '字母或数字',
        testvalues: [{
            value: 'azAZ09',
            expected: true
        }, {
            value: '',
            expected: true
        }, {
            value: '@',
            expected: false
        }, {
            value: 'a b',
            expected: false
        }]
    },{
        regex: new RegExp("^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$"),
        regexdesc: '字母或数字或中划线',
        testvalues: [{
            value: 'a9',
            expected: true
        },{
            value: 'abc.def',
            expected: true
        },{
            value: 'a-9',
            expected: true
        },{
            value: '',
            expected: false
        }, {
            value: '@',
            expected: false
        }, {
            value: 'a b',
            expected: false
        }]		
    },{
        regex: new RegExp("^[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$"),
        regexdesc: 'IP地址',
        testvalues: [{
            value: '127.0.0.3',
            expected: true
        },{
            value: '127.0.0.',
            expected: false
        },{
            value: '127.0.0.a',
            expected: false
        },{
            value: '192.168.149.1',
            expected: true
        }]		
    },{
        regex: new RegExp("^[a-zA-Z0-9]{1,61}(\.[a-zA-Z]{1,})*$"),
        regexdesc: '域名',
        testvalues: [{
            value: 'baidu.com',
            expected: true
        },{
            value: 'help.aliyun.com',
            expected: true
        },{
            value: 'p@.qpic.cn',
            expected: false
        },{
            value: 'p.qpic.cn',
            expected: true
        },{
            value: 'a.b',
            expected: true
        },{
            value: 'consul',
            expected: true
        },{
            value: 'a.b.c',
            expected: true
        },{
            value: '中文',
            expected: false
        }]		
    }];			
	
    var result = [];
    for (var i = 0; i < regexarray.length; i++) {
        var regexitem = regexarray[i];
        for (var j = 0; j < regexitem.testvalues.length; j++) {
            var testitem = regexitem.testvalues[j];
            testitem.actual = regexitem.regex.test(testitem.value);

            var eq = (testitem.expected == testitem.actual);

            result.push("<tr>" +
                "<td>" + regexitem.regexdesc + "</td>" +
                "<td>" + regexitem.regex + "</td>" +
                "<td>" + testitem.value + "</td>" +
                "<td>" + (testitem.actual ? "匹配" : "不匹配") + "</td>" +
                (eq ? "<td class='green'>测试通过</td>" : "<td class='red'>测试失败</td>") +
                "</tr>")
        }
    }

    console.log(result);

    document.getElementById("result").innerHTML = result.join("");

</script>
</body>
</html>